<template>
    <PublicContentVue>
        <table class="table table-striped" style="text-align: center;">
            <thead>
                <tr>
                    <th>玩家头像</th>
                    <th>玩家名称</th>
                    <th>Bot数量</th>
                    <th>对局次数</th>
                    <th>天梯积分</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users" :key="user.id">
                    <td>
                        <img :src="user.photo" alt="" class="user_img">
                    </td>
                    <td>
                        <span :class="user.id == $store.state.user.id ? 'user_username1':'user_username2' ">{{user.username}}</span>
                    </td>
                    <td>{{user_bot[user.id]}}</td>
                    <td>{{user_record[user.id]}}</td>
                    <td>{{user.rating}}</td>
                </tr>
            </tbody>
        </table>
        <nav aria-label="..." style="float: right;">
            <ul class="pagination">
                <li class="page-item ">
                  <a class="page-link" href="#"  @click="click_page(-1)">前一页</a>
                </li>
                <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number">
                    <a class="page-link" href="#" @click="click_page(page.number)" >{{page.number}}</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="#" @click="click_page(-2)">后一页</a>
                </li>
              </ul>
        </nav>
    </PublicContentVue>
</template>

<script>
    import PublicContentVue from "@/components/PublicContent.vue";
    import {useStore} from 'vuex';
    import {ref} from 'vue';
    import $ from 'jquery';
    export default{
        components:{
            PublicContentVue
        },
        setup() {
            const store = useStore();
            let users = ref([]);
            let current_page = 1; //当前在第几页
            let total_users = 0; //对战记录总数
            let pages = ref([]);
            let user_bot = ref({})
            let user_record = ref({})

            const click_page = page => {
                if(page === -1) page = current_page - 1;
                else if(page === -2) page = current_page + 1;
                let max_pages = parseInt(Math.ceil(total_users / 6))

                if(page >= 1 && page <= max_pages) UsersPage(page)
            }

            const update_page = () => {
                let max_pages = parseInt(Math.ceil(total_users / 6));
                let new_pages = [];
                for(let i = current_page - 2; i <= current_page + 2; i++){
                    if(i >= 1 &&i <= max_pages){
                        new_pages.push({
                            number:i,
                            is_active:i === current_page ? "active":"",
                        });
                    }
                }
                pages.value = new_pages;
            }
            const UsersPage = function(page){
                current_page = page;
                $.ajax({
                    type: "get",
                    url: "https://xwjsnakebot.com.cn/api/rankList/getList/",
                    data: {
                        page,
                    },
                    headers: {
                        Authorization:"Bearer "+store.state.user.token,
                    }, 
                    success(response){
                        user_record.value = response.user_record;
                        user_bot.value = response.user_bot;
                        total_users = response.users_count;
                        users.value = response.users;
                        update_page();
                    }
                });
            }

            UsersPage(current_page);
            return {
                users,
                pages,
                user_bot,
                user_record,
                click_page,
            }
        },
    }
</script>

<style scoped>
    .user_img{
        width: 7vh;
        border-radius: 50%;
    }
    table{
        vertical-align: middle;
    }
    table span{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: inline-block;
        width: 50px;
        height: 40px;
        margin-left: 5px;
        padding-top: 10px;
    }
    .user_username1{
        background-color: rgb(159, 245, 169);
        border-radius: 45%;
    }
    .user_username2{
        background-color: rgb(129, 206, 241);
        border-radius: 45%;
    }
    @media screen and (max-width: 430px) and (min-width: 300px) {
        table{
            font-size: 12px;
        }
    }
    @media screen and (max-width: 590px) and (min-width: 430px){
        table{
            font-size: 12px;
        }
    }
</style>